<template>
  <div>
    <a-layout>
<!-- Banner -->
      <a-carousel autoplay>
        <!-- <div><img src="@/assets/banner1.png" alt="banner"></div>
        <div><img src="@/assets/banner2.png" alt="banner"></div> -->
        <div v-for="banner in banners">
          <img :src="`proxy/Ecp.Picture.getNoCheckView.img?pictureId=${banner.image}`" alt="banner">
        </div>
      </a-carousel>
<!-- Content -->
      <a-layout-content>
        <a-layout style="background: #fff;">
          <a-layout-sider width="200" style="background: #fff">
            <a-menu
              v-model="current"
              mode="inline"
              :defaultSelectedKeys="['1']">
              <a-menu-item v-for="menu in menus" :key="menu.key">
                <router-link :to="{ name: menu.url, params: {} }">
                  <icon :type="menu.icon" />
                  <span v-html="menu.title"></span>
                </router-link>
              </a-menu-item>
            </a-menu>
          </a-layout-sider>
          <a-layout-content class="second-content" :style="{ padding: '0 24px', minHeight: '280px' }">
            <transition name="fade-transform" mode="out-in">
              <keep-alive>
                <router-view />
              </keep-alive>
            </transition>
          </a-layout-content>
        </a-layout>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import {invoke} from '@/api'
export default {
  mounted() {
    const vm = this
    vm.loadBanner()
    _.forEach(vm.menus, (menu) => {
      if (menu.url === vm.$route.name) {
        vm.current = [menu.key]
      }
    })
  },
  data() {
    return {
      current: ["1"],
      menus: [
        {title: "旅游动态", url: "travel-dynamics", icon: "trip", key: "1"},
        {title: "政务公开", url: "government-affairs", icon: "line-Officebuilding", key: "2"},
        {title: "美景欣赏", url: "beautiful-views", icon: "travel", key: "3"},
        {title: "旅游攻略", url: "raiders", icon: "paper", key: "4"},
        {title: "局长信箱", url: "mailbox", icon: "envolope", key: "5"}
      ],
      banners: []
    };
  },
  methods: {
    loadBanner() {
      invoke("api/WTM.HomePage.getNotCheckBanners", {
        pageCode: "WTM.HomePage.List"
      }).then((res) => {
        this.banners = []
        this.banners = res.banners
      })
    }
  }
};
</script>

<style lang="scss">

</style>
